// Danmaku.jsx
import React, { useEffect, useRef } from "react";
import "./index.css";

const Danmaku = ({ text, onAnimationEnd }) => {
  const danmakuRef = useRef(null);

  useEffect(() => {
    const danmaku = danmakuRef.current;
    if (danmaku) {
      const container = danmaku.parentElement;
      const containerWidth = container.offsetWidth;
      const duration = Math.random() * 5 + 5; // 随机滚动时间 5 - 15 秒

      danmaku.style.animation = `move ${duration}s linear`;
      danmaku.style.left = `${containerWidth}px`;
      danmaku.style.top = `${Math.random() * (container.offsetHeight - 20)}px`;
    }
  }, [text]);

  const handleAnimationEnd = () => {
    onAnimationEnd();
  };

  return (
    <div
      className="danmaku"
      ref={danmakuRef}
      onAnimationEnd={handleAnimationEnd}
    >
      {text}
    </div>
  );
};

export default Danmaku;
